<template>
    <div class="examine">
        <!--        面包屑-->
        <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>同步数据</el-breadcrumb-item>
            <el-breadcrumb-item>酬金反馈</el-breadcrumb-item>
        </el-breadcrumb>

        </div>
        <!--        操作-->
        <div>
            <el-card>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="代理商">
                        <el-input v-model="formInline.user" placeholder="代理商"></el-input>
                    </el-form-item>
                    <el-form-item label="期账">
                        <el-input v-model="formInline.qizhang" placeholder="期账"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="formInline.region" placeholder="选择状态">
                            <el-option label="已发送" value="1"></el-option>
                            <el-option label="未发送" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="queryDept" >查询</el-button>
                        <el-button type="primary" @click="chongzhi" >重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    <div class="el-button1"><el-card>
        <el-form>
            <el-form-item label="酬金发放反馈列表">
                <download-excel :data="json_data" :fields="json_fields" name="酬金发放反馈列表"><el-button type="primary"    >导出</el-button></download-excel>
            </el-form-item>
        </el-form>
    </el-card>
    </div>
        <!--        列表-->
        <el-table
                :data="daptData"
                height="550"
                border
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="Id"
                    label="代理商编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="代理商">
            </el-table-column>
            <el-table-column
                    prop="applyCourse"
                    label="实发">
            </el-table-column>
            <el-table-column
                    prop="zongJi"
                    label="总计">
            </el-table-column>
            <el-table-column
                    prop="shuiShou"
                    label="税收">
            </el-table-column><el-table-column
                prop="liRun"
                label="利润">
        </el-table-column>

            <el-table-column
                    label="状态">
                <template slot-scope="scope">
                    <span :class="scope.row.Status==1?'statusActive':'statusDel'">{{scope.row.Status==1?'未发送':'已发送'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="CreateDate"

                    label="创建时间">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope" >
                    <el-button type="info" icon="el-icon-message" :class="scope.row.Status==1?'xianshi':'xiaoshi'"  circle @click="fasong(scope.row.Id)"></el-button>
                    <el-button icon="el-icon-search"  circle @click="chakan(scope.row.Id)" ></el-button>
                    <el-button type="danger" icon="el-icon-delete"  circle @click="repulse(scope.row.Id)" ></el-button>
                </template>
            </el-table-column>
        </el-table>
<!--分页-->
        <el-card>

            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="100"
                    @current-change="fengye($event)"
            >
            </el-pagination>
            总条数：{{zongji}}
            当前页数：{{yeshu}}/{{zongyeshu}}
        </el-card>
        <!--对话框-->
        <el-dialog title="查看明细" :visible.sync="dialogFormVisible">
            <!--        列表-->
            <el-table
                    :data="daptData1"
                    height="550"
                    border
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="Id"
                        label="单号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="代理商">
                </el-table-column>
                <el-table-column
                        prop="courseName"
                        label="业务">
                </el-table-column>
                <el-table-column
                        prop="applyCourse"
                        label="科目">
                </el-table-column>
                <el-table-column
                        prop="zongJi"
                        label="总计">
                </el-table-column>
                <el-table-column
                        prop="shuiShou"
                        label="税收">
                </el-table-column><el-table-column
                    prop="liRun"
                    label="利润">
            </el-table-column>
                <el-table-column
                        prop="CreateDate"
                        label="创建时间">
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "PaymentRemuneration",
        data() {
            return{
                daptData:[],
                daptData1:[],
                zongji:12,
                yeshu:1,
                zongyeshu:1,
                dialogFormVisible:false,
                formInline: {
                    user: '',
                    region: '',
                    qizhang:''
                },
               json_fields:{
                   Id:"Id",
                   userName:"Id",
                   courseName:"Id",
                   applyCourse:"Id",
                   zongJi:"Id",
                   shuiShou:"Id",
                   liRun:"Id",
                   Status:"Id",
                   CreateDate:"Id"
               },
                json_data:[]


            }
        },
        mounted() {
            this.daptData=[
                {
                    Id:1,
                    userName:1,
                    courseName:1,
                    applyCourse:1,
                    zongJi:1,
                    shuiShou:1,
                    liRun:1,
                    Status:1,
                    CreateDate:20010101
                },
                {
                    Id:2,
                    userName:2,
                    courseName:2,
                    applyCourse:2,
                    zongJi:2,
                    shuiShou:2,
                    liRun:2,
                    Status:2,
                    CreateDate:20010101
                }
            ],
                this.daptData1=[
                    {
                        Id:1,
                        userName:1,
                        courseName:1,
                        applyCourse:1,
                        zongJi:1,
                        shuiShou:1,
                        liRun:1,
                        Status:1,
                        CreateDate:20010101
                    },
                    {
                        Id:2,
                        userName:2,
                        courseName:2,
                        applyCourse:2,
                        zongJi:2,
                        shuiShou:2,
                        liRun:2,
                        Status:2,
                        CreateDate:20010101
                    }
                ],
                this.json_data=[
                    {
                        Id:1,
                        userName:1,
                        courseName:1,
                        applyCourse:1,
                        zongJi:1,
                        shuiShou:1,
                        liRun:1,
                        Status:1,
                        CreateDate:20010101
                    },
                    {
                        Id:2,
                        userName:2,
                        courseName:2,
                        applyCourse:2,
                        zongJi:2,
                        shuiShou:2,
                        liRun:2,
                        Status:2,
                        CreateDate:20010101
                    }
                ]
        },
        methods:{
            queryDept:function () {
                console.log(this.formInline)
            },
            chongzhi:function () {
                this.formInline.user="";
                this.formInline.region="";
                this.formInline.qizhang="";
            },
            fasong:function (id) {
                console.log(id)
            },
            chakan:function (id) {
                console.log(id)
                this.dialogFormVisible=true
            },
            repulse:function (id) {
                console.log(id)
            },
            fengye:function (e) {
                console.log(e)
                this.yeshu=e;
            },
            // 导出
            outExe(){

            }

        }
    }
</script>

<style scoped>
    .examine .el-card{
        margin: 10px 0;
    }
    .statusActive{
        padding: 5px 10px;
        color: white;
        background-color: green;
    }
    .statusDel{
        padding: 5px 10px;
        color: white;
        background-color: red;
    }
    .xianshi{
        display: inline-block;
    }
    .xiaoshi{
        display: none;
    }
    .el-form-item{
        margin-bottom: 0;
    }
    .el-form{
        text-align: center;
    }
    .el-card .el-pagination{
        text-align: center;
    }
    .el-button1 .el-form-item{
        text-align: right !important;
    }
</style>